<template>
    <div>
        <ol>
            <li v-for="item in items">
                <div>title：{{ item.title }}</div>
                <div>article：{{ item.article }}</div>
                <el-button @click.native="edit(item._id,item)">查看</el-button>
            </li>
        </ol>
        <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="ruleForm" label-width="100px" class="ruleForm">
                <el-form-item label="标题">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="ruleForm.article"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit(ruleForm)" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
        <div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { articleList, articleEdit } from '../api/api'
import NProgress from 'nprogress'
export default {
    data() {
        return {
            ruleForm: {
                title: '',
                article: ''
            },
            page: 1,
            pagesize: 10,
            total: 10,
            items: [],
            editFormVisible: false,//编辑界面是否显示
            editLoading: false,
        }
    },
    methods: {
        // 切换分页
        handleCurrentChange(val) {
            this.page = val;
            this.getArticleList();
        },
        //每页显示数据量变更
        handleSizeChange(val) {
            this.pagesize = val;
            this.getArticleList();
        },
        getArticleList() {
            let para = {
                page: this.page,
                pagesize: this.pagesize
            };
            NProgress.start();
            //获取用户列表
            articleList(para).then((res) => {
                this.items = res.data.data;
                this.total = res.data.nav.total;
                NProgress.done();
            });
        },
        edit(id, item) {
            this.editFormVisible = true;
            this.ruleForm = Object.assign({}, item);

        },
        editSubmit(ruleForm) {
            articleEdit(ruleForm).then((res) => {
                this.getArticleList();
                this.editFormVisible = false;
            })
        }
    },

    mounted() {
        this.getArticleList();
    }
}
</script>
